<template>
  <div>
    <h4 class="rad-txt" style="margin-top:-50px">
      <span class="abtxt1">全部</span>
      <span class="abtext">订单</span>
    </h4>
    <div class="container">
      <div class="row thumbnail center">
        <div class="col-sm-12 thumbnail">
          <div class="col-sm-3 line-center">订单编号</div>
          <div class="col-sm-2 line-center">订单状态</div>
          <div class="col-sm-2 line-center">创建时间</div>
          <div class="col-sm-2 line-center">拥有者</div>
          <div class="col-sm-2 line-center">订单总价</div>
          <div class="col-sm-3 line-center">操作</div>
        </div>
        <div class="list-group" v-for="(item, i) in page.list" :key="i">
          <div class="col-sm-12  list-group-item">
            <div @click="showSingleOrder(item)" class="col-sm-3 line-center">
              {{ item.orderId }}
            </div>
            <div
              @click="showSingleOrder(item)"
              v-if="item.orderState == 0"
              class="col-sm-2 line-center"
            >
              未付款
            </div>
            <div
              @click="showSingleOrder(item)"
              v-if="item.orderState == 1"
              class="col-sm-2 line-center"
            >
              已付款
            </div>
            <div
              @click="showSingleOrder(item)"
              v-if="item.orderState == 2"
              class="col-sm-2 line-center"
            >
              已取消
            </div>
            <div
              @click="showSingleOrder(item)"
              v-if="item.orderState == 3"
              class="col-sm-2 line-center"
            >
              已取票
            </div>
            <div
              @click="showSingleOrder(item)"
              v-if="item.orderState == 4"
              class="col-sm-2 line-center"
            >
              已过期
            </div>
            <div @click="showSingleOrder(item)" class="col-sm-2 line-center">
              {{
                item.orderTime == null
                  ? ""
                  : item.orderTime
                      .toLocaleString()
                      .replace(/T/g, " ")
                      .replace(/\.[\d]{3}Z/, "")
              }}
            </div>
            <div @click="showSingleOrder(item)" class="col-sm-2 line-center">
              {{ item.orderUser }}
            </div>
            <div @click="showSingleOrder(item)" class="col-sm-2 line-center">
              {{ item.orderAllprice }}元
            </div>
            <div class="col-sm-3 line-center">
              <button @click="showSingleOrder(item)" class="btn btn-embossed">
                查看详情
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-row style="margin-left: 300px;">
      <el-col :span="5">
        <el-pagination
          @size-change="pageSizeChange"
          @current-change="pageNumChange"
          :current-page="page.current"
          :page-sizes="[1, 5, 10]"
          :page-size="page.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
        >
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "ShowOrderList",
  data() {
    return {
      page: {}
    };
  },
  methods: {
    pageSizeChange(size) {
      this.page.current = 1;
      this.splitePage(this.page.current, size);
    },
    pageNumChange(current) {
      this.splitePage(current, this.page.size);
    },
    listOrders() {
      //查找全部
      //调用分页函数
      this.splitePage(this.page.current, this.page.size);
    },
    splitePage(pageNum, pageSize) {
      this.$http
        .get("/order/orderInfo/selectPageOrders", {
          params: {
            pageNum: pageNum,
            pageSize: pageSize
          }
        })
        .then(resp => {
          console.log(resp.data.data);
          //将分页信息传入data区中
          this.page = resp.data.data;
          console.log(this.page);
        });
    },
    showSingleOrder(item) {
      sessionStorage.setItem("singleOrderId", item.orderId);
      this.$router.push("/showSingleOrder");
    },
    payment(orderId) {
      this.$http
        .post("/orderInfo/pagePay", {
          orderId: orderId,
          returnUrl: "http://localhost:8080/#/showOrderList",
          userName: "18527384783"
        })
        .then(resp => {
          document.write(resp.data.data);
        });
    }
  },
  created() {
    this.listOrders();
  }
};
</script>

<style scoped>
@import "../../../assets/login/css/style.css";
@import "../../../assets/bootstrap-3.3.4/dist/css/bootstrap.min.css";
@import "../../../assets/Flat-UI-master/dist/css/flat-ui.min.css";
.row {
  margin-left: 20px;
  margin-right: 20px;
}

.line-center {
  line-height: 50px;
  text-align: center;
}

.row input {
  width: 50px;
}

.list-group-item:hover {
  background: #27ae60;
}

.list-group-item div:first-child:hover {
  cursor: pointer;
}
</style>
